<template>
  <div class="layout page-ns">
    <Row>
      <Col span="24"><Button type="primary" icon="md-add" @click="onEdit('')">{{$t('page.base.nsadd')}}</Button></Col>
    </Row>
    <Divider />
    <Table :columns="columns" :data="namespace.list" border :loading="namespace.loading">
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" v-if="row.namespace!=='DEFAULT_NS'" @click="onEdit(row.namespace)">{{$t('button.edit')}}</Button>
      </template>
    </Table>
    <NsEdit ref="editor" @onRefresh="loadNamespace" />
  </div>
</template>

<script>
  import NsEdit from './comp/nsedit'
  export default {
    components: { NsEdit },
    data() {
      return {
        columns: [
          { renderHeader: (h, col) => { return h('span', this.$t('page.base.ns')) }, key: 'namespace', width: 200 },
          { renderHeader: (h, col) => { return h('span', this.$t('form.remark')) }, key: 'remark' },
          { title: '', slot: 'action', width: 150, align: 'center' }
        ],
        namespace: {
          list: [],
          loading: true,
        },
      }
    },
    mounted() {
      this.loadNamespace()
    },
    methods: {
      loadNamespace() {
        this.namespace.loading = true
        this.$storage.listNamespace(namespaces => {
          this.namespace.list = namespaces
          this.namespace.loading = false
        })
      },
      onEdit(name) {
        let ns
        if (name) ns = this.$collect.findByProp(this.namespace.list, 'namespace', name)
        this.$refs.editor.show(ns)
      },
    }
  }
</script>
